<template>
	<view class="Box" v-if="flag">
		<view class="box">
			<!-- 顶部 -->
			<view class="living-top">
				<!-- 顶部 -->
				<!-- <BroadcastTop :live_data="info" :avatarUrl="info.coach.avatarUrl"/> -->
				<BroadcastTop :live_data="info"
					avatarUrl="http://qcdj.ascetic.top/attachment/image/666/24/01/d5b5b161b48a49ee866e175226224127.jpeg" />
				<!-- 观众 -->
			</view>
			<!-- 礼物 -->
			<Scrolling />
			<!-- 弹幕 -->
			<!-- 底部 -->
			<view class="living-bottom" v-if="tab">
				<input type="text" :focus="false" v-model="message" placeholder="说点什么..." class="living-bottom-input"
					@confirm="sendBarrage" confirm-type="send" />
				<view class="living-bottom-right">
					<view class="living-bottom-img">
						<image class="mg" src="../../static/live/yuyin.png" mode="scaleToFill"
							@click="() => { this.onApply = true }" />
					</view>
					<view class="living-bottom-img">
						<image class="mg" src="../../static/live/gengduo.png" @click="() => {
							this.showTab()
							this.report = true
						}" />
					</view>
					<view class="living-bottom-imag">
						<image class="mg" src="../../static/live/liwu.png" mode="scaleToFill" @click="() => {
							this.reward = true
							this.showTab()
						}" />
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view>
			<apply :onApply="onApply" @closeApply="closeApply" @acceptApply="acceptApply"></apply>
		</view>
		<!-- 举报 -->
		<view>
			<report :report="report" @closeReport="closeReport" @showTab="showTab" :info="info"></report>
		</view>
		<!-- 连麦 -->
		<view>
			<lian-mai :lianmai="lianmai" @closeLianMai="closeLianMai"></lian-mai>
		</view>
		<!-- 观众 -->
		<view>
			<audience :audience="audience" @closeAudience="closeAudience"></audience>
		</view>
		<!-- 打赏 -->
		<view>
			<reward :reward="reward" @closeReward="closeReward" @showTab="showTab"></reward>
		</view>
	</view>
</template>

<script>
	import webSocket from "@/webscoket/webSocket.js"
	// 弹窗组件
	import apply from "@/user/pages/zhibo/components/apply"
	// 举报组件
	import report from "../pages/components/report"
	// 连麦组件
	import lianMai from "../pages/components/lianMai"
	// 观众组件
	import audience from "../pages/components/audience"
	// 打赏组件
	import reward from "../pages/components/reward"
	//顶部
	import BroadcastTop from "@/user/pages/zhibo/components/broadcast-top.vue"
	//礼物
	import Scrolling from "@/user/pages/zhibo/components/scrolling.vue"
	/**
	 * 创建直播间页
	 */
	import UniDataSelect from "@/uni_modules/uni-data-select"
	export default {
		components: {
			UniDataSelect,
			apply,
			report,
			lianMai,
			audience,
			reward,
			BroadcastTop,
			Scrolling
		},
		props: {
			'info': {
				type: Object,
				default: false
			}
		},
		data() {
			return {
				message: "", // 弹幕/评论内容
				onApply: false, // 弹窗
				report: false, // 举报
				lianmai: false, // 连麦
				audience: false, // 观众
				reward: false, // 打赏
				name: "", // 主播名字
				avatarUrl: "", // 头像路径
				flag: 'true',
				tab: true,
				aaa: '',
			}
		},
		onLoad(options) {
			this.name = options.name
			this.avatarUrl = options.url
			// console.log(this.name, this.avatarUrl)
			uni.$on('message', function(res) {
				var data = JSON.parse(res.data);
				console.log(data, 'web')
			})
		},
		created() {
			this.userGetToken()
		},
		methods: {
			// 拒绝连麦
			closeApply() {
				this.onApply = false
			},
			// 同意连麦
			acceptApply() {
				// console.log('123456789');
				this.onApply = false
				this.lianmai = true
				// console.log(this.lianmai, 'this.lianmai');
			},
			// 关闭举报
			closeReport() {
				this.report = false
			},
			// 关闭连麦
			closeLianMai() {
				this.lianmai = false
			},
			// 关闭观众
			closeAudience() {
				this.audience = false
			},
			// 关闭打赏
			closeReward() {
				this.reward = false
			},
			// 发送弹幕
			async sendBarrage() {
				// console.log(this.info,'this.info');
			
				
				var res = uni.$api.live.user_list_send({
						live_id: this.info.id,
						content: this.message
					})
			
			},
			// 获取用户长连接地址
			async userGetToken() {
				uni.request({
					url: 'http://qcdj.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/appuser/user/gettoken', // 接口地址
					method: 'POST', // 请求方法
					header: {
						autograph: "8187c2fd865923857d50439e08cc1894"
					},
					data: {
						cate_id: 1
					},
					success: (res) => {
						// const token = res.data.data.key
						// this.aaa = new webSocket(`wss://qcdj.ascetic.top/ws?toekn=${token}`, 60)
						// this.aaa.initSocket()
					},
					fail: (err) => {
						console.error(err, '用户长连接'); // 打印错误信息
					}
				});
			},
			showTab() {
				this.tab = !this.tab
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 公共图片样式
	.mg {
		width: 76rpx;
		height: 76rpx;
	}

	/* 整体 */
	.Box {
		position: relative;
		color: #fff;
		width: 750rpx;
		height: 1623rpx;
	}

	.box {
		padding: 0 20rpx;
		width: 750rpx;
		height: 1334rpx;
	}

	/* 顶部 */
	.living-top {
		position: fixed;
		top: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		width: 750;
	}

	// 顶-左
	.top-left {
		width: 250rpx;
		height: 64rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	// 头像
	.top-left-img {
		width: 54rpx;
		height: 54rpx;
		margin-right: 10rpx;
	}

	// 顶-左-文字
	.top-left-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.text-list {
		display: flex;
		align-items: center;
	}

	.red-heart {
		width: 20rpx;
		height: 20rpx;
	}

	.dianzan {
		font-size: 18rpx;
	}

	// 昵称
	.nickname {
		width: 95rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin-bottom: 10rpx;
	}

	/* 观众 */
	.audience-list {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.audience {
		width: 55rpx;
		height: 55rpx;
		background: #000000;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	// 人数
	.audience-num {
		width: 78rpx;
		height: 56rpx;
		line-height: 56rpx;
		text-align: center;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 28rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.audience-img {
		width: 31rpx;
		height: 31rpx;
	}

	/* 礼物 */
	.gift-list {
		position: absolute;
		bottom: 35%;
	}

	.gift {
		display: flex;
		width: 426rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 40rpx;
	}

	.gift-left {
		display: flex;
		align-items: center;
	}

	.gift-right {
		display: flex;
	}

	.gift-left-img {
		width: 62rpx;
		height: 62rpx;
		margin-right: 10rpx;
	}

	.gift-left-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.gift-nickname {
		margin-bottom: 0rpx;
		font-size: 26rpx;
	}

	.gift-name {
		font-size: 22rpx;
	}


	/* 棒棒糖 */
	.gift-right-img {
		width: 110rpx;
		height: 110rpx;
	}

	.gift-right-text {
		display: flex;
		width: 68rpx;
		height: 36rpx;
		align-items: center;
		margin-top: 30rpx;
	}

	.gift-num {
		font-size: 30rpx;
	}

	/* 弹幕 */
	.barrage {
		position: absolute;
		bottom: 10%;
	}

	.barrage-item {
		height: 46rpx;
		line-height: 46rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 23rpx;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.item-list {
		display: flex;
		margin: 0 20rpx;
	}

	.item-name {
		color: #FFCCE6;
	}

	/* 底部 */
	.living-bottom {
		position: fixed;
		bottom: 20;
		display: flex;
		flex-direction: row;
		width: 750rpx;
		height: 80rpx;
		justify-content: space-between;
	}

	.living-bottom-input {
		margin-left: 25rpx;
		width: 380rpx;
		height: 76rpx;
		line-height: 76rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 38rpx;
		padding: 0 20rpx;
	}

	.living-bottom-right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.living-bottom-img {
		width: 76rpx;
		height: 76rpx;
		margin-right: 10rpx;
	}

	.living-bottom-imag {
		width: 76rpx;
		height: 76rpx;
	}
</style>